<template>
    <div class="foot">
     
        <span @click="btn(index)" v-for="(item,index) in list" v-bind:key="index" :class="{active:btnsIndex==index}">{{item.name}}</span>
    </div>
  </template>
  
  <script>
  export default {
    name: 'foot',
    data(){
      return{
        btnsIndex:0,
        list:[
          {name:'首页',css:'home'},
          {name:'爆爆团',css:'bbt'},
          {name:'订单',css:'order'},
          {name:'我的',css:'mine'},
       
        ]
      }
      },
      methods:{
       btn(index){
        console.log(index);
        
        this.btnsIndex=index
       }
      },
    props: {
      msg: String
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .foot{
    position:fixed;
    bottom: 0%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: white;
    font-size: 14px;
  }
  .active{
    color: lightcoral;
  }
  </style>
  